<template>
  <div class="u-page page-color-other">
    <u-navbar :is-back="true" :custom-back="comeback" :title="title" :background="background" :border-bottom="false" back-icon-color="#ffffff">
      <view class="slot-wrap">
        <u-image width="380rpx" height="70rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/BrandSale/title.png"></u-image>
      </view>
    </u-navbar>
    <div class="bg-area">
      <div class="topbar">
        <div class="input">
          <u-icon name="search" size="40" color="#7098fd"></u-icon>
          <input type="text" v-model="keyword" :placeholder="hotText" placeholder-style="padding-top: 5rpx;padding-left: 10rpx;font-size: 28rpx;" 	@confirm="search"/>
          <div class="btn" @click="search">搜索</div>
        </div>
      </div>
      <div class="u-flex u-pl-10 u-pr-10" v-if="!searchStr">
        <div class="label-item">
          <u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label1.png"></u-image>
          <div class="u-pl-5">全场包邮</div>
        </div>
        <div>|</div>
        <div class="label-item">
          <u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label2.png"></u-image>
          <div class="u-pl-5">超值低价</div>
        </div>
        <div>|</div>
        <div class="label-item">
          <u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label3.png"></u-image>
          <div class="u-pl-5">48小时发货</div>
        </div>
      </div>
	  <div class="swiper-box u-mt-15" v-if="!searchStr">
		<div class="swiper-title">
			<div class="u-pr-5">品牌推荐 100%正品授权</div>
			<u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/SummerHot/dianzan.png"></u-image>
		</div>
	    <div v-for="(item,index) in RecommendGoods" :key="index">
	      <div style="width: 95%;margin: 0 auto;">
	        <div class="explosions-item" v-for="(titem,tindex) in item.data" :key="tindex" @click="toGoodsDetails(titem)">
	          <div class="explosions-image-container">
	            <u-image width="200rpx" height="194rpx" border-radius="20" :src="titem.goodsImages.split(',')[0]"></u-image>
	          </div>
	          <div class="explosions-content-container">
	            <div class="line-ellipsis">
	  					<span class="goods-title-tag" :style="'background-color: '+titem.attributeColor+';'" v-if="titem.productAttribute">{{titem.productAttribute}}</span>
	  					<span class="aui-list-theme-title">{{titem.goodsName}}</span>
	            </div>
	            <div class="line-ellipsis u-mt-5">
	              <span>
	                {{titem.specification?titem.specification:''}}
	              </span>
	            </div>
	            <div class="explosions-content-bottom u-pt-20 u-pr-10">
					<div class="u-flex">
						<span class="amount-money font-baseline">
							<span class="u-fz-18 u-font-bold">&yen;{{titem.discountPrice?titem.discountPrice:0}}</span>
						</span>
						<span class="u-font-sm small-font" style="margin-left: 20rpx;text-decoration: line-through;">
							&yen;{{titem.goodsPrice?titem.goodsPrice:0}}
						</span>
					</div>
					<div class="explosions-robbery-btn" @click="search">立即抢</div>
	            </div>
	          </div>
	        </div>
	      </div>
	      </div>
	  	</div>
	  </div>

      <div class="u-pb-40 u-pt-10">
        <div style="font-weight: bold;width: 95%;margin: 0 auto;">
			<u-tabs :list="list" bg-color="#f0f6fc" :show-bar="false" active-color="#000000" inactive-color="#6b6969"
                  :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="current" @change="change"></u-tabs>
			<div class="u-flex u-scroll-x" style="margin-left: 15rpx;margin-right: 15rpx;padding-bottom: 10rpx;">
				<div v-for="(item,index) in subList[current].data">
					<u-tag :text="item.name" mode="dark" :bg-color="item.checked?'#eb5468':'#f3f2f3'" 
							:color="item.checked?'#ffffff':'#797878'" @click="selectTag(item)" />
				</div>
			</div>
		</div>
        <div class="aui-list-box u-pl-5 u-pr-5" v-if="GoodSalesList && GoodSalesList.length>0">
          <a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
             @click="toGoodsDetails(item)">
            <div class="aui-list-theme-img">
              <u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
            </div>
            <div class="aui-list-theme-message">
              <div class="u-flex line-ellipsis">
                <div class="goods-title-tag" :style="'background-color: '+item.attributeColor+';'" v-if="item.productAttribute">{{item.productAttribute}}</div>
                <h3 class="aui-list-theme-title">{{item.goodsName}}</h3>
              </div>
              <div class="u-flex pt-3">
                <u-image width="25rpx" height="25rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
                <div class="goods-label-text">玫丽全网最低价</div>
              </div>
              <div class="u-flex u-pb-5" style="justify-content: space-between;">
								<span class="amount-money font-baseline">
									<span class="u-fz-18 u-font-bold">&yen;{{item.discountPrice}}</span>
								</span>
                <span class="sales-volume">
									本期售{{item.soldNum?item.soldNum:0}}
								</span>
              </div>
            </div>
            <ShareBtn :docUnid="shareData.docUnid" :url="shareData.url"
                      :route="shareData.route" :style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"
                      btnText="帮卖海报" @successCallBack="shareSuccessCallBack" ref="shareModule"></ShareBtn>
          </a>
        </div>
        <div class="u-text-center" style="padding-top: 20%;" v-else>
          <u-empty text="暂无商品" mode="data"></u-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shareMixins from '@/mixins/share';
export default {
  mixins: [shareMixins],
  data() {
    return {
      background: {
        // 导航栏背景图
        background: 'url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/BrandSale/background-1.png) no-repeat',
        // 还可以设置背景图size属性
        backgroundSize: '100%',
      },
      RecommendGoods: [],
      keyword: '',
      pageNum: 1,
      pageSize: 10,
      searchStr: '',
      GoodSalesList: [],
      shareData: {
        docUnid: '',
        url: '',
        style: 9,
        type: 2,
        route: '',
        posterData: {},
        imageUrl: '',
        shareTitle: ''
      },
      hotText: '请输入关键词',
	  list: [
	    {name: '为你推荐'},
		{name: '孩子用品'},
		{name: '宝妈自用'},
		{name: '家庭消费'}
	  ],
	  current: 0,
	  subList: [
		  {
			  data: []
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'健康和营养',checked:false},
				  {name:'教育和成长',checked:false},
				  {name:'娱乐和玩具',checked:false}
			  ]
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'美容与保健',checked:false},
				  {name:'时尚与穿搭',checked:false},
				  {name:'兴趣与爱好',checked:false}
			  ]
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'厨房用品与食品',checked:false},
				  {name:'家居生活与旅行',checked:false},
				  {name:'家居装饰与家具',checked:false}
			  ]
		  }
	  ],
	  supplyChain: ''
    }
  },

  mounted() {

  },

  onShow() {
  },

  onPullDownRefresh() {
    this.pageNum = 1
    this.getRecommendGoods()
    // 停止Loading
    uni.stopPullDownRefresh();
  },

  onReachBottom() {
    this.pageNum += 1
    this.getGoodSalesList()
  },

  onLoad(option) {
    this.getRecommendGoods()
	this.increasePageTraffic()
  },

  methods: {

    /**
     * 获取今日推荐数据
     */
    async getRecommendGoods() {
		let result = await this.$u.api.unifyMiniRestGet({
		  systemid: "meily",
		  url: "/goods/query/zone/show/goods/SIGNED",
		  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.RecommendGoods = []
			let obj = {data: []}
			for(let i in result.data.SIGNED){
			 	if(i < 6){
			 		obj.data.push(result.data.SIGNED[i])
			 	}
			}
			this.RecommendGoods.push(obj)
			this.getGoodSalesList()
		}
    },

    change(index) {
	  if(this.current != index){
	  	this.current = index
	  	if(this.current != 0){
	  		this.supplyChain = this.list[this.current].name
	  	}else{
	  		this.supplyChain = ''
	  	}
	  	this.pageNum = 1
	  	this.getGoodSalesList()
	  }
    },

    /**
     * 获取商品销售类列表数据
     */
    async getGoodSalesList() {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/goods/shelf/list",
		goodsType: 'SIGNED',
        searchStr: this.searchStr,
        supplyChain: this.supplyChain,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
		excludeZoneData: true,
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code == 200) {
        if (result.rows.length > 0 && this.isNotNull(result.rows[0].goodsName)) {
          this.hotText = "大家都在搜" + result.rows[0].goodsName;
        }

        if (this.pageNum != 1) {
          this.GoodSalesList = this.GoodSalesList.concat(result.rows);
        } else {
          this.GoodSalesList = result.rows;
        }
      }
    },

    /**
     * 获取搜索框数据
     */
    getSearchStr(e) {

    },

    /**
     * 搜索
     */
    async search(){
      this.searchStr = this.keyword
      this.pageNum = 1
      this.getGoodSalesList()
    },

    /**
     * 跳转到商品详情
     */
    async toGoodsDetails(item) {

      // 增加访问量，不需要管是否执行成功
      this.increaseTraffic(item);

      // 跳转到销售机会页面
      this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
    },

    /**
     * 增加访问量
     */
    async increaseTraffic(item){
      console.log("**************************");
      console.log("开始执行，增加访问量...");
      const userInfo = uni.getStorageSync('userInfo')
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/behavior/statistics/update",
        createUser: userInfo.userId,
        createUserName: userInfo.nickName,
        createUserAvatar: userInfo.avatarUrl,
        behaviorId: item.goodsId,
        behaviorName: item.goodsName,
        behaviorType: '0',// 访问量
        sourceId: item.goodsId,
        sourceType: '0',// 商品
        remark: '',
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      console.log(result);
      console.log("增加访问量，执行结束！");
      console.log("**************************");
    },
	
	/**
	 * 增加进入品牌特卖专场访问量
	 */
	async increasePageTraffic(){
	  console.log("**************************");
	  console.log("开始执行，增加访问量...");
	  let current_page = this.getCurrentPageUrl(this)
	  const userInfo = uni.getStorageSync('userInfo')
	  let result = await this.$u.api.unifyMiniRest({
	    systemid: "meily",
	    url: "/behavior/statistics/update",
	    createUser: userInfo.userId,
	    createUserName: userInfo.nickName,
	    createUserAvatar: userInfo.avatarUrl,
	    behaviorId: current_page,
	    behaviorName: '品牌特卖',
	    behaviorType: '0',// 访问量
	    sourceId: current_page,
	    sourceType: '2',// 页面地址
	    remark: '',
	    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  });
	  console.log(result);
	  console.log("增加访问量，执行结束！");
	  console.log("**************************");
	},


    /**
     * 分享回调函数
     */
    async shareSuccessCallBack(obj){
      console.log("**************************");
      console.log("开始执行，分享回调函数...");
      console.log("obj=", obj);
      // 保存分享次数
      const userInfo = uni.getStorageSync('userInfo')
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/behavior/statistics/update",
        createUser: userInfo.userId,
        createUserName: userInfo.nickName,
        createUserAvatar: userInfo.avatarUrl,
        behaviorId: this.goods.goodsId,
        behaviorName: this.goods.goodsName,
        behaviorType: '1',// 分享
        sourceId: obj.NewId,// 分享记录唯一id
        sourceType: '1',// 团购
        remark: '',
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      console.log(result);
      console.log("分享回调函数，执行结束！");
      console.log("**************************");
    },
	
	/**
	 * 选中子分类
	 */
	selectTag(item) {
		if(!item.checked){
			for(const i in this.subList[this.current].data) {
				if(this.subList[this.current].data[i].name == item.name){
					this.subList[this.current].data[i].checked = true
				}else{
					this.subList[this.current].data[i].checked = false
				}
			}
			if(this.current != 0){
				this.supplyChain = item.name=='全部'?this.list[this.current].name:(this.list[this.current].name + '-' + item.name)
			}else{
				this.supplyChain = ''
			}
			this.pageNum = 1
			this.getGoodSalesList()
		}
	}


  }

};
</script>

<style scoped>
.page-color-other {
  background-color: #f0f6fc;
}
.bg-color {
  background-color: #f4f2f5;
}
.bg-area {
  /* height: 350rpx; */
  background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/BrandSale/background-2.png) no-repeat;
  background-size: 100%;
}
.topbar{
  position: relative;
  z-index: 1;
  padding: 10px;
}
.input{
  background-color: #fff;
  padding: 4px 10px;
  border-radius: 30px;
  display: flex;
}
.input input{
  flex: 1;
}
.input .btn {
  background-color: #7098fd;
  color: #ffffff;
  border-radius: 30rpx;
  width: 120rpx;
  text-align: center;
  height: 55rpx;
  line-height: 55rpx;
}
.search-placeholder {
  padding-top: 5rpx;
  padding-left: 10rpx;
  font-size: 28rpx;
}
.color-white {
  color: #ffffff;
}
.label-item {
  width: 32%;
  font-size: 28rpx;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-box {
  background-color: white;
  width: 95%;
  border-radius: 20rpx;
  margin:0 auto;
  /* box-shadow: 0px 3px 12px 0 #e4e4e4; */
  /* border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec; */
}
.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20rpx 10rpx 40rpx 10rpx;
}
.swiper-item-title {
  font-size: 22rpx;
  padding-top: 8rpx;
  width: 150rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.swiper-item-price {
  color: #ea4d5e;
  font-size: 32rpx;
  font-weight: 450;
}
.swiper-title {
  display: flex;
  font-size: 34rpx;
  font-weight: bold;
  padding: 30rpx 0rpx 30rpx 20rpx;
}

/* 商品列表 */
.aui-list-box {
  overflow: hidden;
  position: relative;
}

.aui-list-box-title {
  font-size: 38rpx;
  color: #4fb0fd;
  text-align: center;
}

.aui-list-item {
  width: 47%;
  float: left;
  margin: 0 0 2% 2%;
  background: #fff;
  display: block;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 10rpx;
  /* box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb; */
}

.aui-list-theme-img {
  height: auto;
  width: 100%;
  position: relative;
}

.aui-list-theme-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-list-theme-message {
  background: #ffffff;
  padding: 10rpx 10rpx;
}

.aui-list-theme-title {
  color: #4a4a4a;
  font-size: 30rpx;
  line-height: 38rpx;
  margin-top: 5rpx;
}

.aui-list-theme-message p {
// color: #ff3b52;
  font-size: 24rpx;
  font-weight: bold;
}

.aui-list-theme-message span.line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
  text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
}

.aui-list-theme-message p i {
  font-style: normal;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  color: #ff3b52;
  float: right;
  width: 25px;
  height: 25px;
}

.aui-list-theme-message p em {
  font-style: normal;
  font-size: 0.7rem;
  color: #ff3b52;
  text-decoration: line-through;
  font-weight: normal;
}

.price-tag {
  padding: 2rpx;
  color: #f16158;
  border: 2rpx solid #ea4d5e;
  text-align: center;
  font-size: 18rpx;
  line-height: 22rpx;
}

.sold-num {
  color: #b7b7b7;
  font-size: 24rpx;
}

/* 两行或多行显示... */
.line-ellipsis {
	width: 450rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.goods-title-tag {
  padding: 0rpx 5rpx;
  color: #ffffff;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.goods-label-text {
  color: #ba8e41;
  font-size: 22rpx;
  font-weight: 300;
  padding-left: 3rpx;
}

.pt-3 {
  padding-top: 3rpx;
}

.font-baseline {
  display: flex;
  align-items: baseline;
}

.amount-money {
  color: #ea4d5e;
  font-size: 22rpx;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
}

.explosions-item {
  position: relative;
  display: flex;
  width: 100%;
  height: 240rpx;
  border: 1px solid #ea4d5e;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.explosions-image-container {
  margin: 20rpx 0 20rpx 10rpx;
  width: 30%
}

.explosions-content-container{
  float: left;
  flex-direction: column;
  justify-content: space-between;
  height: 200rpx;
  width:70%;
  margin: 20rpx 0 20rpx 10rpx;
}
.explosions-robbery-btn{
  background-color: #ea4d5e;
  color: #ffffff;
  border-radius: 30rpx;
  width: 120rpx;
  text-align: center;
  height: 55rpx;
  line-height: 55rpx;
}

.explosions-content-bottom{
  display: flex;
  justify-content: space-between;
}

.small-font{
  color: #a8a8a8;
}
</style>
